import { Box, Button, Container, Image } from "@chakra-ui/react";
import styled from "@emotion/styled";
import { FaSignInAlt, FaAlipay,FaSearch
} from "react-icons/fa";
import { css } from "@emotion/react"

const Sign = styled.div`
height:52px;
line-height: 52px;
color:#fff;
padding:0 6px;
border-left: 1px solid #393939;
border-right:1px solid #393939;
float: left;
&>button{
    padding:0 10px;
}
`
const logo = css`
  width:140px;
  height:auto;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  
`
const Search = styled.a`
float: right;
height: 50px;
padding: 0 10px;
border-left: 1px solid #393939;
border-right: 1px solid #393939;
color:#fff;
display: flex;
align-items: center;
`
export default function Header() {
    return <Box h="52px" bgColor="#202020" borderBottom="1px solid #393939">
        <Container h="52px" maxW={1200} pos="relative">
            <Sign>
                <Button colorScheme="transparent" leftIcon={<FaSignInAlt />}>登录11</Button>
                <Button colorScheme="transparent" leftIcon={<FaAlipay />}>注册</Button>
            </Sign>
            <Image css={logo} src="/images/logo.png"></Image>
            <Search><FaSearch/></Search>
            
        </Container>
    </Box>
}